<template>
  <el-tabs
    v-model="comp.config.activeName"
    type="card"
    editable
    @edit="handleTabsEdit"
  >
    <el-tab-pane
      :key="item.name"
      v-for="(item) in comp.config.editableTabs"
      :label="item.title"
      :name="item.name"
    >
      <span v-html="item.content"></span>
    </el-tab-pane>
  </el-tabs>
</template>

<script>

export default {
  name: "TabView",
  components: {},
  props: ["comp"],
  data() {
    return {};
  },
  computed: {},
  methods: {
    handleTabsEdit(targetName, action) {
        if (action === 'add') {
          ++this.comp.config.tabIndex
            this.comp.config.editableTabs.push({
              key: Date.now(),
              title: "Tab " + this.comp.config.tabIndex,
              name: String( this.comp.config.tabIndex),
              type: "",
              module: "",
              content: "",
            })
        }
        if (action === 'remove') {
          console.log('targetName', targetName)
          let index = 0
          this.comp.config.editableTabs.map((item, i) => {
            if(item.name == targetName){
              index = i
            }
          })
          console.log(this.comp.config.editableTabs, 'before')
          this.comp.config.editableTabs.splice(index, 1)
          console.log(this.comp.config.editableTabs, 'after')
        }
    }
  },
  mounted() {
  }
}
</script>,
<style scoped>
</style>
